<template>
  <div class="log-center-container">
    <el-card class="log-header-card" shadow="hover">
      <template #header>
        <div class="card-header">
          <h2>日志管理中心</h2>
          <div class="header-actions">
            <el-button type="primary" :icon="Refresh" @click="refreshLogs" :loading="loading">刷新</el-button>
            <el-button 
              type="danger" 
              :icon="Delete" 
              @click="showClearConfirm" 
              :disabled="!logs.length || !userStore.hasPermission('log.delete')"
              v-if="userStore.hasPermission('log.delete')"
            >
              清空日志
            </el-button>
          </div>
        </div>
      </template>
      <div class="filter-container">
        <el-form :model="queryParams" inline>
          <el-form-item label="日志级别">
            <el-select 
              v-model="queryParams.level" 
              placeholder="全部级别"
              clearable 
              @change="handleFilter"
              class="level-select"
              size="default"
            >
              <el-option 
                label="全部级别" 
                value="all"
                class="option-all"
              >
                <div class="level-option">
                  <el-icon class="level-option-icon">
                    <List />
                  </el-icon>
                  <span class="level-option-text">全部级别</span>
                </div>
              </el-option>
              <el-option 
                v-for="(label, key) in LOG_LEVELS" 
                :key="key" 
                :label="label" 
                :value="key"
                :class="`option-${key.toLowerCase()}`"
              >
                <div class="level-option">
                  <el-icon class="level-option-icon" :class="`icon-${key.toLowerCase()}`">
                    <component :is="getIconForLevel(key)" />
                  </el-icon>
                  <span class="level-option-text">{{ label }}</span>
                </div>
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="时间范围">
            <el-date-picker v-model="dateRange" type="daterange" range-separator="至" start-placeholder="开始日期"
              end-placeholder="结束日期" value-format="YYYY-MM-DD" @change="handleDateRangeChange" />
          </el-form-item>
          <el-form-item label="关键词">
            <el-input v-model="queryParams.keyword" placeholder="搜索日志内容" clearable @keyup.enter="handleFilter"
              @clear="handleFilter">
              <template #suffix>
                <el-icon class="el-input__icon" @click="handleFilter">
                  <Search />
                </el-icon>
              </template>
            </el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="handleFilter" :icon="Search">筛选</el-button>
            <el-button @click="handleReset" :icon="Refresh">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-card>

    <el-card class="log-stats-card" shadow="hover" v-loading="statsLoading">
      <div class="stats-container">
        <el-row :gutter="20">
          <el-col :span="6" v-for="(stat, type) in logStats" :key="type">
            <div :class="['stat-box', `level-${type.toLowerCase()}`]">
              <div class="stat-header">
                <span class="stat-title">{{ getStatsTitle(type) }}</span>
              </div>
              <div class="stat-main">
                <el-icon :size="24" class="stat-icon">
                  <component :is="getIconForLevel(type)" />
                </el-icon>
                <div class="stat-content">
                  <div class="stat-value">{{ stat.count }}</div>
                  <div class="stat-label">{{ LOG_LEVELS[type] }}</div>
                </div>
              </div>
            </div>
          </el-col>
        </el-row>
      </div>
    </el-card>

    <el-card class="log-table-card" shadow="hover" v-loading="loading">
      <template v-if="logs.length > 0">
        <transition name="fade">
          <el-table :data="logs" style="width: 100%" border stripe @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="50" />
            <el-table-column type="index" width="70" label="#" />
            <el-table-column prop="timestamp" label="时间" sortable width="160" show-overflow-tooltip>
              <template #default="scope">
                <el-tooltip effect="dark" :content="formatFullDateTime(scope.row.timestamp)" placement="top">
                  <span class="time-text">{{ formatDateTime(scope.row.timestamp) }}</span>
                </el-tooltip>
              </template>
            </el-table-column>
            <el-table-column prop="level" label="级别" width="140" align="center">
              <template #default="scope">
                <el-tag :type="getLevelType(scope.row.level)" effect="dark" class="level-tag"
                  :class="`level-${scope.row.level.toLowerCase()}`">
                  <el-icon class="level-icon">
                    <component :is="getIconForLevel(scope.row.level)" />
                  </el-icon>
                  {{ scope.row.level }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="message" label="内容" min-width="600" class-name="message-column" />
            <el-table-column label="操作" width="80" fixed="right" align="center">
              <template #default="scope">
                <el-tooltip content="查看详情" placement="top">
                  <el-button type="primary" size="small" @click="showLogDetail(scope.row)" :icon="View"></el-button>
                </el-tooltip>
              </template>
            </el-table-column>
          </el-table>
        </transition>
      </template>

      <template v-else>
        <div class="empty-state">
          <el-empty description="暂无日志数据" :image-size="120">
            <el-button type="primary" @click="refreshLogs" :icon="Refresh">刷新数据</el-button>
          </el-empty>
        </div>
      </template>

      <div class="pagination-container">
        <el-pagination v-model:current-page="queryParams.pageIndex" v-model:page-size="queryParams.pageSize"
          :page-sizes="[10, 20, 50, 100]" layout="total, sizes, prev, pager, next, jumper" :total="total"
          @size-change="handleSizeChange" @current-change="handleCurrentChange" />
      </div>
    </el-card>

    <!-- 日志详情对话框 -->
    <el-dialog v-model="logDetailVisible" title="日志详情" width="700px" :close-on-click-modal="false">
      <el-descriptions :column="1" border>
        <el-descriptions-item label="ID">{{ currentLog.id }}</el-descriptions-item>
        <el-descriptions-item label="时间">{{ formatFullDateTime(currentLog.timestamp) }}</el-descriptions-item>
        <el-descriptions-item label="级别">
          <el-tag :type="getLevelType(currentLog.level)" effect="dark">{{ currentLog.level }}</el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="来源" v-if="currentLog.source">{{ currentLog.source }}</el-descriptions-item>
        <el-descriptions-item label="用户" v-if="currentLog.userName && currentLog.userName !== 'system'">{{
          currentLog.userName }}</el-descriptions-item>
        <el-descriptions-item label="内容">
          <div class="log-message-content">{{ currentLog.message }}</div>
        </el-descriptions-item>
        <el-descriptions-item label="异常信息" v-if="currentLog.stackTrace">
          <div class="log-stack-trace">
            <pre>{{ currentLog.stackTrace }}</pre>
          </div>
        </el-descriptions-item>
      </el-descriptions>
      <template #footer>
        <el-button @click="logDetailVisible = false">关闭</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { defineComponent, ref, reactive, computed, onMounted } from 'vue'
import { logApi, LOG_LEVELS } from '@/api/log'
import { useUserStore } from '@/stores/user'
import { ElMessage, ElMessageBox } from 'element-plus'
import {
  View, Delete, Refresh, Search, List,
  InfoFilled, WarningFilled, CircleCheckFilled, CircleCloseFilled
} from '@element-plus/icons-vue'

export default defineComponent({
  name: 'LogCenter',
  components: {
    View, Delete, Refresh, Search
  },
  setup() {
    // 用户状态管理
    const userStore = useUserStore()
    // 数据初始化
    const logs = ref([])
    const loading = ref(false)
    const statsLoading = ref(false)
    const total = ref(0)
    const logStats = ref({
      Error: { count: 0 },
      Warning: { count: 0 },
      Information: { count: 0 },
      Debug: { count: 0 }
    })

    // 查询参数
    const queryParams = reactive({
      pageIndex: 1,
      pageSize: 10,
      level: 'all',
      keyword: '',
      startDate: '',
      endDate: ''
    })

    // 日期范围选择器值
    const dateRange = ref([])

    // 批量操作相关
    const selectedLogs = ref([])

    // 日志详情对话框
    const logDetailVisible = ref(false)
    const currentLog = ref({})

    // 加载日志数据
    const loadLogs = async () => {
      try {
        loading.value = true
        // 准备API参数，将'all'转换为空字符串
        const apiParams = {
          ...queryParams,
          level: queryParams.level === 'all' ? '' : queryParams.level
        }
        const response = await logApi.getLogs(apiParams)
        if (response.data) {
          logs.value = response.data.items || []
          total.value = response.data.totalCount || 0
        } else {
          logs.value = []
          total.value = 0
          ElMessage.warning('未获取到日志数据')
        }
      } catch (err) {
        ElMessage.error(err.message || '获取日志数据失败')
        console.error('获取日志数据失败:', err)
      } finally {
        loading.value = false
      }
    }

    // 加载日志统计数据
    const loadLogStats = async () => {
      try {
        statsLoading.value = true
        const response = await logApi.getLogStats({
          startDate: queryParams.startDate,
          endDate: queryParams.endDate
        })
        if (response.data) {
          logStats.value = response.data
        }
      } catch (err) {
        console.error('获取日志统计数据失败:', err)
      } finally {
        statsLoading.value = false
      }
    }

    // 刷新日志列表
    const refreshLogs = () => {
      loadLogs()
      loadLogStats()
    }

    // 格式化日期时间 - 表格用紧凑格式
    const formatDateTime = (dateTimeStr) => {
      if (!dateTimeStr) return '-'
      const date = new Date(dateTimeStr)
      const now = new Date()
      const diff = now - date

      // 如果是今天，只显示时间
      if (diff < 24 * 60 * 60 * 1000 && date.getDate() === now.getDate()) {
        return date.toLocaleString('zh-CN', {
          hour: '2-digit',
          minute: '2-digit',
          second: '2-digit'
        })
      }

      // 如果是近7天，显示月日+时间
      if (diff < 7 * 24 * 60 * 60 * 1000) {
        return date.toLocaleString('zh-CN', {
          month: '2-digit',
          day: '2-digit',
          hour: '2-digit',
          minute: '2-digit'
        })
      }

      // 其他情况显示完整日期
      return date.toLocaleString('zh-CN', {
        year: '2-digit',
        month: '2-digit',
        day: '2-digit',
        hour: '2-digit',
        minute: '2-digit'
      })
    }

    // 格式化完整日期时间 - 详情用完整格式
    const formatFullDateTime = (dateTimeStr) => {
      if (!dateTimeStr) return '-'
      const date = new Date(dateTimeStr)
      return date.toLocaleString('zh-CN', {
        year: 'numeric',
        month: '2-digit',
        day: '2-digit',
        hour: '2-digit',
        minute: '2-digit',
        second: '2-digit',
        weekday: 'short'
      })
    }

    // 获取日志级别对应的Tag类型
    const getLevelType = (level) => {
      const map = {
        'Error': 'danger',
        'Warning': 'warning',
        'Information': 'primary',
        'Debug': 'success'
      }
      return map[level] || 'info'
    }

    // 获取日志级别对应的图标
    const getIconForLevel = (level) => {
      const icons = {
        'Error': CircleCloseFilled,
        'Warning': WarningFilled,
        'Information': InfoFilled,
        'Debug': CircleCheckFilled
      }
      return icons[level] || InfoFilled
    }

    // 获取统计卡片的标题
    const getStatsTitle = (type) => {
      const titles = {
        'Error': '错误日志',
        'Warning': '警告日志',
        'Information': '信息日志',
        'Debug': '调试日志'
      }
      return titles[type] || '未知类型'
    }

    // 处理日期范围变化
    const handleDateRangeChange = (val) => {
      if (val) {
        queryParams.startDate = val[0]
        queryParams.endDate = val[1]
      } else {
        queryParams.startDate = ''
        queryParams.endDate = ''
      }
      handleFilter()
    }

    // 处理筛选条件变化
    const handleFilter = () => {
      console.log('筛选条件:', JSON.stringify(queryParams, null, 2)) // 添加详细调试日志
      queryParams.pageIndex = 1
      loadLogs()
      loadLogStats()
    }

    // 重置筛选条件
    const handleReset = () => {
      queryParams.level = ''
      queryParams.keyword = ''
      queryParams.startDate = ''
      queryParams.endDate = ''
      dateRange.value = []
      queryParams.pageIndex = 1
      loadLogs()
      loadLogStats()
    }

    // 处理每页条数变化
    const handleSizeChange = (val) => {
      queryParams.pageSize = val
      loadLogs()
    }

    // 处理页码变化
    const handleCurrentChange = (val) => {
      queryParams.pageIndex = val
      loadLogs()
    }

    // 处理表格多选
    const handleSelectionChange = (selection) => {
      selectedLogs.value = selection
    }

    // 显示日志详情
    const showLogDetail = async (log) => {
      try {
        loading.value = true
        // 如果需要获取更详细的日志信息，可以调用 getLogById API
        const response = await logApi.getLogById(log.id)
        currentLog.value = response.data || log
        logDetailVisible.value = true
      } catch (err) {
        ElMessage.error('获取日志详情失败')
      } finally {
        loading.value = false
      }
    }

    // 删除单条日志
    const deleteLog = async (id) => {
      try {
        await ElMessageBox.confirm('确定要删除该条日志记录吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })

        loading.value = true
        await logApi.deleteLog(id)
        ElMessage.success('删除成功')
        refreshLogs()
      } catch (err) {
        if (err !== 'cancel') {
          ElMessage.error(err.message || '删除失败')
        }
      } finally {
        loading.value = false
      }
    }

    // 批量删除日志
    const batchDeleteLogs = async () => {
      if (!selectedLogs.value.length) {
        ElMessage.warning('请选择要删除的日志')
        return
      }

      try {
        await ElMessageBox.confirm(`确定要删除选中的 ${selectedLogs.value.length} 条日志记录吗？`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })

        loading.value = true
        const ids = selectedLogs.value.map(item => item.id)
        await logApi.batchDeleteLogs(ids)
        ElMessage.success('批量删除成功')
        refreshLogs()
      } catch (err) {
        if (err !== 'cancel') {
          ElMessage.error(err.message || '批量删除失败')
        }
      } finally {
        loading.value = false
      }
    }

    // 清空日志确认
    const showClearConfirm = () => {
      ElMessageBox.confirm('此操作将清空所有日志记录，是否继续？', '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        clearLogs()
      }).catch(() => { })
    }

    // 清空日志
    const clearLogs = async () => {
      try {
        loading.value = true
        // 传递clearAll=true参数
        await logApi.clearLogs({ clearAll: true })
        ElMessage.success('已清空所有日志')
        // 清空成功后重新加载数据
        logs.value = []
        total.value = 0
        await refreshLogs()
      } catch (err) {
        ElMessage.error(err.message || '清空日志失败')
      } finally {
        loading.value = false
      }
    }

    // 计算属性：当前选中的级别显示文本
    const currentLevelText = computed(() => {
      if (queryParams.level === 'all' || queryParams.level === '') {
        return '全部级别'
      }
      return LOG_LEVELS[queryParams.level] || '全部级别'
    })

    onMounted(() => {
      loadLogs()
      loadLogStats()
    })

    return {
      // 用户权限
      userStore,
      
      // 数据
      logs,
      loading,
      statsLoading,
      total,
      logStats,
      queryParams,
      dateRange,
      selectedLogs,
      logDetailVisible,
      currentLog,
      LOG_LEVELS,
      
      // 计算属性
      currentLevelText,

      // 方法
      loadLogs,
      loadLogStats,
      refreshLogs,
      formatDateTime,
      formatFullDateTime,
      getLevelType,
      getIconForLevel,
      getStatsTitle,
      handleDateRangeChange,
      handleFilter,
      handleReset,
      handleSizeChange,
      handleCurrentChange,
      handleSelectionChange,
      showLogDetail,
      deleteLog,
      batchDeleteLogs,
      showClearConfirm,
      clearLogs,

      // 图标
      View,
      Delete,
      Refresh,
      Search
    }
  }
})
</script>

<style lang="scss" scoped>
.log-center-container {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  height: 100%;
  box-sizing: border-box;
  background: linear-gradient(135deg, #f5f7fa 0%, #e8ecf0 100%);
  min-height: 100vh;
}

.log-header-card {
  margin-bottom: 0;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
  transition: all 0.3s ease;

  &:hover {
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
  }

  :deep(.el-card__header) {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border-radius: 12px 12px 0 0;
    padding: 20px;
  }

  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;

    h2 {
      margin: 0;
      font-size: 24px;
      font-weight: 600;
      color: white;
      text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    }

    .header-actions {
      display: flex;
      gap: 12px;

      .el-button {
        border-radius: 8px;
        font-weight: 500;
        transition: all 0.3s ease;

        &:hover {
          transform: translateY(-2px);
          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        }
      }
    }
  }

  .filter-container {
    margin-top: 16px;
    padding: 20px;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 8px;
    backdrop-filter: blur(10px);

    .el-form-item {
      margin-right: 20px;
      margin-bottom: 0;

      .el-form-item__label {
        font-weight: 500;
        color: #606266;
      }

      .el-select,
      .el-input,
      .el-date-editor {
        border-radius: 8px;

        &:hover {
          box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        }
      }
    }
  }
}

.log-stats-card {
  margin-bottom: 0;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
  overflow: hidden;

  .stats-container {
    .stat-box {
      display: flex;
      flex-direction: column;
      padding: 20px;
      border-radius: 12px;
      color: white;
      position: relative;
      overflow: hidden;
      transition: all 0.3s ease;
      cursor: pointer;

      &:hover {
        transform: translateY(-3px);
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
      }

      &::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(255, 255, 255, 0.1);
        opacity: 0;
        transition: opacity 0.3s ease;
      }

      &:hover::before {
        opacity: 1;
      }

      &.level-error {
        background: linear-gradient(135deg, #ff6b6b 0%, #ee5a52 100%);
        box-shadow: 0 4px 20px rgba(255, 107, 107, 0.3);
      }

      &.level-warning {
        background: linear-gradient(135deg, #feca57 0%, #ff9ff3 100%);
        box-shadow: 0 4px 20px rgba(254, 202, 87, 0.3);
      }

      &.level-information {
        background: linear-gradient(135deg, #48cae4 0%, #0077b6 100%);
        box-shadow: 0 4px 20px rgba(72, 202, 228, 0.3);
      }

      &.level-debug {
        background: linear-gradient(135deg, #51cf66 0%, #40c057 100%);
        box-shadow: 0 4px 20px rgba(81, 207, 102, 0.3);
      }

      .stat-header {
        margin-bottom: 12px;
        
        .stat-title {
          font-size: 13px;
          font-weight: 600;
          opacity: 0.9;
          letter-spacing: 0.5px;
          text-transform: uppercase;
        }
      }

      .stat-main {
        display: flex;
        align-items: center;
      }

      .stat-icon {
        margin-right: 16px;
        font-size: 24px;
        opacity: 0.9;
      }

      .stat-content {
        flex: 1;

        .stat-value {
          font-size: 28px;
          font-weight: 700;
          line-height: 1.2;
          margin-bottom: 4px;
          text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }

        .stat-label {
          font-size: 14px;
          opacity: 0.9;
          font-weight: 500;
          letter-spacing: 0.5px;
        }
      }
    }
  }
}

.log-table-card {
  flex: 1;
  display: flex;
  flex-direction: column;
  margin-bottom: 0;
  overflow: hidden;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);

  :deep(.el-card__body) {
    height: 100%;
    padding: 20px;
    display: flex;
    flex-direction: column;
  }

  :deep(.el-table) {
    flex: 1;
    border-radius: 8px;
    overflow: hidden;

    .el-table__header {
      background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);

      th {
        background: transparent;
        color: #495057;
        font-weight: 600;
        border-bottom: 2px solid #dee2e6;
        white-space: nowrap;
      }
    }

    .el-table__body {
      .cell {
        padding: 0 8px;
        word-break: break-word;
      }
      
      .message-column .cell {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 600px;
      }
    }

    .el-table__row {
      transition: all 0.3s ease;

      &:hover {
        background-color: #f8f9fa;
        transform: scale(1.01);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
      }

      td {
        border-bottom: 1px solid #f1f3f4;
        padding: 12px 8px;
        vertical-align: middle;

        &:first-child {
          padding-left: 12px;
        }

        &:last-child {
          padding-right: 12px;
        }
      }
    }

    .time-text {
      font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
      font-size: 12px;
      color: #606266;
      cursor: help;

      &:hover {
        color: #409eff;
      }
    }
  }
}


:deep(.el-button) {
  border-radius: 6px;
  font-size: 12px;
  padding: 6px 12px;
  font-weight: 500;
  transition: all 0.3s ease;

  &:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  }
}

:deep(.el-tag) {
  border-radius: 6px;
  font-weight: 500;
  padding: 4px 8px;
  font-size: 12px;
  transition: all 0.3s ease;

  &.level-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;

    .level-icon {
      font-size: 14px;
    }

    &:hover {
      transform: scale(1.05);
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    }

    &.level-error {
      background: linear-gradient(135deg, #ff6b6b 0%, #ee5a52 100%);
      border: none;
      color: white;
      box-shadow: 0 2px 8px rgba(255, 107, 107, 0.3);
    }

    &.level-warning {
      background: linear-gradient(135deg, #feca57 0%, #ff9f43 100%);
      border: none;
      color: white;
      box-shadow: 0 2px 8px rgba(254, 202, 87, 0.3);
    }

    &.level-information {
      background: linear-gradient(135deg, #48cae4 0%, #0077b6 100%);
      border: none;
      color: white;
      box-shadow: 0 2px 8px rgba(72, 202, 228, 0.3);
    }

    &.level-debug {
      background: linear-gradient(135deg, #51cf66 0%, #40c057 100%);
      border: none;
      color: white;
      box-shadow: 0 2px 8px rgba(81, 207, 102, 0.3);
    }
  }
}


.pagination-container {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
  padding: 16px 0;
  border-top: 1px solid #f1f3f4;

  :deep(.el-pagination) {
    .el-pager li {
      border-radius: 6px;
      margin: 0 2px;
      transition: all 0.3s ease;

      &:hover {
        transform: translateY(-1px);
      }

      &.is-active {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
      }
    }

    .btn-prev,
    .btn-next {
      border-radius: 6px;
      transition: all 0.3s ease;

      &:hover {
        transform: translateY(-1px);
      }
    }
  }
}


.log-message-content {
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 200px;
  overflow-y: auto;
  padding: 16px;
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  border-radius: 8px;
  border: 1px solid #dee2e6;
  font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
  font-size: 13px;
  line-height: 1.5;

  &::-webkit-scrollbar {
    width: 6px;
  }

  &::-webkit-scrollbar-track {
    background: #f1f3f4;
    border-radius: 3px;
  }

  &::-webkit-scrollbar-thumb {
    background: #c1c8cd;
    border-radius: 3px;

    &:hover {
      background: #a8b2ba;
    }
  }
}

.log-stack-trace {
  pre {
    max-height: 300px;
    overflow-y: auto;
    background: linear-gradient(135deg, #2d3748 0%, #4a5568 100%);
    padding: 20px;
    border-radius: 8px;
    font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
    white-space: pre-wrap;
    word-break: break-all;
    font-size: 13px;
    color: #f7fafc;
    line-height: 1.6;
    border: 1px solid #4a5568;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);

    &::-webkit-scrollbar {
      width: 8px;
    }

    &::-webkit-scrollbar-track {
      background: #2d3748;
      border-radius: 4px;
    }

    &::-webkit-scrollbar-thumb {
      background: #4a5568;
      border-radius: 4px;

      &:hover {
        background: #718096;
      }
    }
  }
}

// 对话框样式优化
:deep(.el-dialog) {
  border-radius: 12px;
  overflow: hidden;

  .el-dialog__header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 20px;

    .el-dialog__title {
      color: white;
      font-weight: 600;
      font-size: 18px;
    }

    .el-dialog__headerbtn {
      .el-dialog__close {
        color: white;
        font-size: 18px;

        &:hover {
          color: rgba(255, 255, 255, 0.8);
        }
      }
    }
  }

  .el-dialog__body {
    padding: 30px;
  }

  .el-dialog__footer {
    padding: 20px 30px;
    background: #f8f9fa;
    border-top: 1px solid #dee2e6;

    .el-button {
      border-radius: 8px;
      font-weight: 500;
      padding: 10px 20px;

      &:hover {
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
      }
    }
  }
}

// 空状态样式
.empty-state {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 300px;

  :deep(.el-empty) {
    .el-empty__image {
      img {
        filter: grayscale(0.3);
      }
    }

    .el-empty__description {
      color: #909399;
      font-size: 16px;
      margin: 20px 0;
    }

    .el-button {
      border-radius: 8px;
      font-weight: 500;

      &:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
      }
    }
  }
}

// 描述列表样式优化
:deep(.el-descriptions) {
  .el-descriptions__header {
    margin-bottom: 20px;
  }

  .el-descriptions__body {
    .el-descriptions__table {
      .el-descriptions__label {
        background: #f8f9fa;
        color: #495057;
        font-weight: 600;
        width: 120px;
      }

      .el-descriptions__content {
        background: white;
        color: #212529;
      }
    }
  }
}

// 响应式设计
// 响应式设计
@media (max-width: 1200px) {
  .log-center-container {
    .log-table-card {
      :deep(.el-table) {

        .el-table__header th,
        .el-table__body td {
          padding: 8px 6px;
          font-size: 13px;
        }

        // 在中等屏幕上优化列宽
        .el-table__header th:nth-child(1) {
          width: 40px !important;
        }

        // 选择框
        .el-table__header th:nth-child(2) {
          width: 50px !important;
        }

        // 序号
        .el-table__header th:nth-child(3) {
          width: 140px !important;
        }

        // 时间
        .el-table__header th:nth-child(4) {
          width: 100px !important;
        }

        // 级别
        .el-table__header th:nth-child(5) {
          width: 120px !important;
        }

        // 操作
        .el-table__header th:nth-child(7) {
          width: 70px !important;
        }
      }
    }
  }
}

@media (max-width: 768px) {
  .log-center-container {
    padding: 12px;
    gap: 12px;

    .log-table-card {
      :deep(.el-table) {
        font-size: 12px;

        .el-table__header th,
        .el-table__body td {
          padding: 6px 4px;
        }

        // 移动端列宽优化
        .el-table__header th:nth-child(1) {
          width: 35px !important;
        }

        // 选择框
        .el-table__header th:nth-child(2) {
          width: 40px !important;
        }

        // 序号
        .el-table__header th:nth-child(3) {
          width: 120px !important;
        }

        // 时间
        .el-table__header th:nth-child(4) {
          width: 80px !important;
        }

        // 级别
        .el-table__header th:nth-child(5) {
          width: 110px !important;
        }

        // 操作
        .el-table__header th:nth-child(7) {
          width: 60px !important;
        }

        .el-button {
          padding: 4px 8px;
          font-size: 11px;

          .el-icon {
            margin-right: 2px;
          }
        }

        .level-tag {
          padding: 2px 6px;
          font-size: 11px;

          .level-icon {
            font-size: 12px;
          }
        }
      }
    }
  }
}

@media (max-width: 480px) {
  .log-center-container {
    .log-table-card {
      :deep(.el-table) {

        // 超小屏幕隐藏序号列
        .el-table__header th:nth-child(2),
        .el-table__body td:nth-child(2) {
          display: none;
        }

        // 重新调整其他列宽度
        .el-table__header th:nth-child(1) {
          width: 30px !important;
        }

        // 选择框
        .el-table__header th:nth-child(3) {
          width: 100px !important;
        }

        // 时间
        .el-table__header th:nth-child(4) {
          width: 70px !important;
        }

        // 级别
        .el-table__header th:nth-child(5) {
          width: 90px !important;
        }

        // 操作
        .el-table__header th:nth-child(7) {
          width: 50px !important;
        }

        .el-button {
          padding: 3px 6px;
          font-size: 10px;

          span {
            display: none; // 只显示图标
          }
        }
      }
    }
  }
}

// 加载动画和过渡效果
.fade-enter-active,
.fade-leave-active {
  transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
  transform: translateY(20px) scale(0.95);
}

// 自定义加载动画
:deep(.el-loading-mask) {
  background-color: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(4px);

  .el-loading-spinner {
    .el-loading-text {
      color: #409eff;
      font-weight: 500;
    }

    .circular {
      width: 50px;
      height: 50px;
      animation: loading-rotate 2s linear infinite;
    }

    .path {
      stroke: #409eff;
      stroke-width: 3;
      stroke-dasharray: 90, 150;
      stroke-dashoffset: 0;
      stroke-linecap: round;
      animation: loading-dash 1.5s ease-in-out infinite;
    }
  }
}

@keyframes loading-rotate {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

@keyframes loading-dash {
  0% {
    stroke-dasharray: 1, 150;
    stroke-dashoffset: 0;
  }

  50% {
    stroke-dasharray: 90, 150;
    stroke-dashoffset: -35;
  }

  100% {
    stroke-dasharray: 90, 150;
    stroke-dashoffset: -124;
  }
}

// 日志级别下拉框样式
.level-select {
  width: 120px;
  
  .level-option {
    display: flex;
    align-items: center;
    
    .level-option-icon {
      margin-right: 8px;
      font-size: 14px;
    }
    
    .level-option-text {
      font-weight: 500;
    }
  }
}

:deep(.el-select-dropdown__item) {
  &.option-error {
    color: #f56c6c;
    
    &:hover {
      background-color: rgba(245, 108, 108, 0.1);
    }
  }
  
  &.option-warning {
    color: #e6a23c;
    
    &:hover {
      background-color: rgba(230, 162, 60, 0.1);
    }
  }
  
  &.option-information {
    color: #409eff;
    
    &:hover {
      background-color: rgba(64, 158, 255, 0.1);
    }
  }
  
  &.option-debug {
    color: #67c23a;
    
    &:hover {
      background-color: rgba(103, 194, 58, 0.1);
    }
  }
}

// 下拉框图标颜色
.level-option-icon {
  &.icon-error {
    color: #f56c6c;
  }
  
  &.icon-warning {
    color: #e6a23c;
  }
  
  &.icon-information {
    color: #409eff;
  }
  
  &.icon-debug {
    color: #67c23a;
  }
}

// 下拉框样式增强
.level-select {
  :deep(.el-select__wrapper) {
    border-radius: 8px;
    border: 1px solid #dcdfe6;
    transition: all 0.3s ease;
    
    &:hover {
      border-color: #c0c4cc;
    }
    
    &.is-focused {
      border-color: #409eff;
      box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.1);
    }
  }
}

.level-option {
  display: flex;
  align-items: center;
  gap: 8px;
  
  .level-option-icon {
    font-size: 16px;
  }
  
  .level-option-text {
    font-weight: 500;
  }
}

// 全部级别选项样式
.option-all {
  border-bottom: 1px solid #f0f0f0;
  margin-bottom: 4px;
  
  .level-option-icon {
    color: #909399;
  }
  
  &:hover {
    background-color: rgba(144, 147, 153, 0.1);
  }
}
</style>
